<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    {% block style %}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        body { padding-top: 80px;}
    </style>
    {% endblock style %}
    {% block extrastyle %}
    {% endblock extrastyle %}
    <title>
        {% block title %}
        {% endblock title %}
    </title>
</head>
<body>

    <!-- navbar header -->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a href="/" class="navbar-brand">
                    {{ config.BLOGGING_SITENAME or 'Flask-Blogging'}}
                </a>
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- main content -->
     <div class="container">
         {% block message %}
         {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                    <div class="alert alert-{{category}} alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        {{ message }}
                    </div>
                    </div>
                 </div>
                {% endfor %}
            {% endif %}
         {% endwith %}

         {% endblock %}
         {% block main %}
         {% endblock main %}
         {% block extramain %}
         {% endblock extramain %}
     </div>
    {% include "blogging/analytics.html" %}
    {% block js %}
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/x-mathjax-config">
          MathJax.Hub.Config({
          "HTML-CSS": {
          styles: {
          ".MathJax .mo, .MathJax .mi": {color: "black ! important"}}
          },
          tex2jax: {inlineMath: [['$','$'], ['\\\\(','\\\\)']],processEscapes: true}
          });
    </script>
    {% endblock js %}
    {% block extrajs %}
    {% endblock extrajs %}
</body>
</html>
